<!doctype html>
<html lang="en">
<head>
    <title>ProgressBar - Overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Provide a simple, familiar way for end-users to choose a value in a predefined range." />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />

    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <link href="../../Themes/Wijmo/jquery.wijmo.wijprogressbar.css" rel="stylesheet"
        type="text/css" />
    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
    <script src="../../Wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
    <script src="../../Wijmo/jquery.wijmo.wijtooltip.js" type="text/javascript"></script>
    <script src="../../Wijmo/jquery.wijmo.wijprogressbar.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#hProBar").wijprogressbar({ value: 75, animationOptions: {
                duration: 1000
            }
            });
            $("#vProBar").wijprogressbar({ value: 75, fillDirection: "north" });
        });    
    </script>
    <style type="text/css">
        .layout
        {
            margin: 10px 0;
        }
    </style>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div class="layout ui-helper-clearfix">
                <h6>
                    Horizontal</h6>
                <div id="hProBar">
                </div>
            </div>
            <div class="layout ui-helper-clearfix">
                <h6>
                    Vertical</h6>
                <div id="vProBar">
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                Showing a fixed indication or a real-time indicator of progress is quick and easy
                for Web developers with the wijprogressbar widget. This sample represents the orientations
                of the progress bar. By default, the progress bar is horizontal, but you can set
                it to vertical by setting the fillDirection option to north or south; in this sample,
                the fillDirection option is set to north.
            </p>
        </div>
    </div>
</body>
</html>
